<script setup lang="ts">
import {getPage} from "@/api/crawl/queue";
import {CrawlQueueStatusEnum} from '@/enums/CrawlQueueStatusEnum';
import {CrawlQueueUrlTypeEnum} from '@/enums/CrawlQueueUrlTypeEnum';
import CrawlNamespaceSelector from "@/components/Crawl/CrawlNamespaceSelector.vue"
import CrawlReplicableTableColumn from "@/components/Crawl/CrawlReplicableTableColumn.vue"

import {CrawlQueueForm, CrawlQueuePageVO, CrawlQueueQuery,} from "@/api/crawl/queue/types";
import {ref} from "vue";

const queryFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);

const queryParams = reactive<CrawlQueueQuery>({
	pageNum: 1,
	pageSize: 10,
});

const dataList = ref<CrawlQueuePageVO[]>();

const dialog = reactive<DialogOption>({
	visible: false,
});

const formData = reactive<CrawlQueueForm>({
	nsCode: "",
	tmplCode: "",
});

const nsSelector = ref()
const timePicker = ref()

/**
 * 查询
 */
function handleQuery() {
	loading.value = true;
	getPage(queryParams)
			.then(({data}) => {
				dataList.value = data.list;
				total.value = data.total;
			})
			.finally(() => {
				loading.value = false;
			});
}

/**
 * 重置查询
 */
function resetQuery() {
	queryFormRef.value.resetFields();
	queryParams.pageNum = 1;
	queryParams.nsCode = '';
	queryParams.id = undefined;
	queryParams.instanceId = undefined;

	queryParams.createTimeStart = undefined
	queryParams.createTimeEnd = undefined
	nsSelector.value.reset();
	timePicker.value.reset();
	handleQuery();
}

/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
	ids.value = selection.map((item: any) => item.id);
}

onMounted(() => {
	handleQuery();
});

function onSelectNsCode(nsCode: string) {
	queryParams.nsCode = nsCode;
}

function onSelectTimeRange(timeRange: [Date, Date]) {
	if (timeRange === null) {
		queryParams.createTimeStart = undefined;
		queryParams.createTimeEnd = undefined;
		return;
	}
	queryParams.createTimeStart = timeRange[0];
	queryParams.createTimeEnd = timeRange[1];
}

</script>

<template>
	<div class="app-container">
		<div class="search">
			<el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<CrawlNamespaceSelector ref="nsSelector" @on-select="onSelectNsCode"/>
				<el-form-item label="模板编码" prop="tmplCode">
					<el-input
							v-model="queryParams.tmplCode"
							placeholder="请输入..."
							clearable
					/>
				</el-form-item>
				<el-form-item label="实例ID" prop="instanceId">
					<el-input
							class='idInput'
							v-model="queryParams.instanceId"
							placeholder="请输入..."
							clearable
					/>
				</el-form-item>
				<el-form-item label="队列ID" prop="id">
					<el-input
							class='idInput'
							v-model="queryParams.id"
							placeholder="请输入..."
							clearable
					/>
				</el-form-item>
				<el-form-item label="实例状态" prop="crawlStatus">
					<el-select v-model="queryParams.crawlStatus" placeholder="请选择" clearable>
						<el-option label="解析失败" :value="CrawlQueueStatusEnum.RESOLVED_ERR"/>
						<el-option label="抓取失败" :value="CrawlQueueStatusEnum.ERR"/>
						<el-option label="未抓取" :value="CrawlQueueStatusEnum.INIT"/>
						<el-option label="抓取中" :value="CrawlQueueStatusEnum.PROCESSING"/>
						<el-option label="已抓取" :value="CrawlQueueStatusEnum.FINISH"/>
						<el-option label="已解析" :value="CrawlQueueStatusEnum.RESOLVED"/>
					</el-select>
				</el-form-item>
				<CrawlTimePicker ref="timePicker" @on-select="onSelectTimeRange"/>
				<el-form-item>
					<el-button type="primary" @click="handleQuery()">
						<i-ep-search/>
						搜索
					</el-button>
					<el-button @click="resetQuery()">
						<i-ep-refresh/>
						重置
					</el-button>
				</el-form-item>
			</el-form>
		</div>

		<el-card shadow="never">
			<el-table
					highlight-current-row
					:data="dataList"
					v-loading="loading"
					@selection-change="handleSelectionChange"
					border>
				<el-table-column type="selection" width="55" align="center"/>
				<el-table-column label="空间" prop="nsCode,nsName">
					<template #default="scope">
						<span>{{ scope.row.nsName }}</span><br>
						<span style="color: #8492a6; font-size: 12px">{{ scope.row.nsCode }}</span>
					</template>
				</el-table-column>
				<el-table-column label="模板" prop="tmplCode" min-width="100">
					<template #default="scope">
						<span>{{ scope.row.tmplName }}</span><br>
						<span style="color: #8492a6; font-size: 12px">{{ scope.row.tmplCode }}</span>
					</template>
				</el-table-column>
				<el-table-column label="实例ID" prop="instanceId"/>
				<el-table-column label="队列ID" prop="id"/>
				<CrawlReplicableTableColumn label="URL MD5" prop="urlMd5"/>
				<CrawlReplicableTableColumn label="URL" prop="url"/>
				<CrawlReplicableTableColumn label="标题" prop="title"/>
				<el-table-column label="抓取状态" prop="crawlStatus" align="center" min-width="85">
					<template #default="scope">
						<el-tag v-if="scope.row.crawlStatus === CrawlQueueStatusEnum.RESOLVED_ERR" type="danger">解析失败</el-tag>
						<el-tag v-else-if="scope.row.crawlStatus === CrawlQueueStatusEnum.ERR" type="danger">抓取失败</el-tag>
						<el-tag v-else-if="scope.row.crawlStatus === CrawlQueueStatusEnum.INIT">未抓取</el-tag>
						<el-tag v-else-if="scope.row.crawlStatus === CrawlQueueStatusEnum.PROCESSING">抓取中</el-tag>
						<el-tag v-else-if="scope.row.crawlStatus === CrawlQueueStatusEnum.FINISH">已抓取</el-tag>
						<el-tag v-else-if="scope.row.crawlStatus === CrawlQueueStatusEnum.RESOLVED" type="success">已解析
						</el-tag>
						<el-tag v-else type="danger">未知</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="页面类型" prop="urlType" min-width="85">
					<template #default="scope">
						<el-tag v-if="scope.row.urlType === CrawlQueueUrlTypeEnum.LIST" type="info">列表页</el-tag>
						<el-tag v-else-if="scope.row.urlType === CrawlQueueUrlTypeEnum.DETAIL" type="info">详情页</el-tag>
						<el-tag v-else type="danger">未知</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="HTTP状态码" prop="httpStatus"/>
				<CrawlReplicableTableColumn label="HTTP响应" prop="httpResponse"/>
				<el-table-column label="创建时间" prop="createTime"/>
			</el-table>

			<pagination
					v-if="total > 0"
					v-model:total="total"
					v-model:page="queryParams.pageNum"
					v-model:limit="queryParams.pageSize"
					@pagination="handleQuery"/>
		</el-card>

	</div>
</template>

<style lang="scss" scoped>
.idInput {
	width: 100px;
}
</style>
